<template>
    <van-field :model-value="modelValue" is-link readonly :name="name" :label="label" :placeholder="placeholder"
        @click="showPicker = true" />
    <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
        <van-picker v-if="columns && columns.length" :columns="columns" :model-value="pickerValue"
            @confirm="onConfirmOfMS" @cancel="showPicker = false" />
        <van-area v-else :area-list="areaList" :model-value="pickerValue" @confirm="onConfirmOfArea"
            @cancel="showPicker = false" />
    </van-popup>
</template>

<script setup lang="ts">
import { ref } from "vue"
const a = ref(0)
defineProps({
    modelValue: '',
    name: '',
    placeholder: '',
    columns: [],
    label: '',
    areaList: []
})
const emits = defineEmits(['update:modelValue'])
const showPicker = ref(false)
const pickerValue = ref([])

const onConfirmOfMS = ({ selectedValues, selectedOptions }) => {
    emits('update:modelValue', selectedOptions[0]?.text);
    pickerValue.value = selectedValues;
    showPicker.value = false;
};
const onConfirmOfArea = ({ selectedValues, selectedOptions }) => {
    pickerValue.value = selectedValues.length
        ? selectedValues[selectedValues.length - 1]
        : '';
    showPicker.value = false;
    emits('update:modelValue', selectedOptions.map((item) => item.text).join('-'));
};
</script>

<style lang="scss" scoped>

</style>
